<template>
  <div class="coupon-card" :style="containerStyle">
    <!-- 无优惠券 -->
    <div v-if="!data.couponList || !data.couponList.length" class="empty-container">
      <el-empty description="暂无优惠券" />
    </div>

    <!-- 优惠券卡片网格 -->
    <div
      v-else
      class="coupon-grid"
      :style="gridStyle"
    >
      <div
        v-for="(coupon, index) in data.couponList"
        :key="index"
        class="coupon-item"
        :class="[`coupon-${data.cardStyle || 'default'}`]"
        :style="itemStyle"
      >
        <div class="coupon-left">
          <div class="coupon-amount">
            <span class="currency">¥</span>
            <span class="value">{{ coupon.amount }}</span>
          </div>
          <div class="coupon-condition">{{ coupon.condition || '满任意金额可用' }}</div>
        </div>

        <div class="coupon-divider"></div>

        <div class="coupon-right">
          <div class="coupon-title">{{ coupon.title }}</div>
          <div class="coupon-time">{{ coupon.time || '有效期至2023-12-31' }}</div>
          <el-button 
            type="primary" 
            size="small" 
            :disabled="coupon.disabled"
            @click="handleReceiveCoupon(coupon)"
          >
            {{ coupon.received ? '已领取' : '立即领取' }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ElMessage } from 'element-plus'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`,
    backgroundColor: props.data.backgroundColor || '#ffffff',
    paddingTop: `${props.data.paddingTop || 10}px`,
    paddingLeft: `${props.data.paddingHorizontal || 15}px`,
    paddingRight: `${props.data.paddingHorizontal || 15}px`
  }
})

// 计算网格样式
const gridStyle = computed(() => {
  return {
    display: 'grid',
    gridTemplateColumns: `repeat(${props.data.gridColumns || 2}, 1fr)`,
    gap: `${props.data.itemMargin || 15}px`
  }
})

// 计算优惠券项样式
const itemStyle = computed(() => {
  return {
    borderRadius: `${props.data.borderRadius || 0}px`
  }
})

// 领取优惠券
function handleReceiveCoupon(coupon) {
  if (coupon.received || coupon.disabled) {
    ElMessage.warning('该优惠券已领取或不可用')
    return
  }

  // 这里应该调用API领取优惠券
  ElMessage.success('领取成功')
  coupon.received = true
}
</script>

<style lang="scss" scoped>
.coupon-card {
  width: 100%;

  .empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }

  .coupon-grid {
    width: 100%;

    .coupon-item {
      display: flex;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-3px);
      }

      .coupon-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px 10px;
        background-color: #ff6034;
        color: #fff;

        .coupon-amount {
          display: flex;
          align-items: baseline;

          .currency {
            font-size: 14px;
            margin-right: 2px;
          }

          .value {
            font-size: 24px;
            font-weight: bold;
          }
        }

        .coupon-condition {
          font-size: 12px;
          margin-top: 5px;
        }
      }

      .coupon-divider {
        width: 10px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #f5f5f5;
        }

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #f5f5f5;
        }
      }

      .coupon-right {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px;

        .coupon-title {
          font-size: 14px;
          font-weight: bold;
          color: #333;
        }

        .coupon-time {
          font-size: 12px;
          color: #999;
          margin: 5px 0;
        }
      }
    }

    // 不同的卡片样式
    .coupon-red {
      .coupon-left {
        background-color: #ff6034;
      }
    }

    .coupon-blue {
      .coupon-left {
        background-color: #409eff;
      }
    }

    .coupon-green {
      .coupon-left {
        background-color: #67c23a;
      }
    }

    .coupon-purple {
      .coupon-left {
        background-color: #9c27b0;
      }
    }
  }
}
</style>
